<template>
	<view :class="currentTheme">
		<a-nabbar  :is-back="false" name="测本约车"/>
		<view>
			<view class="u-padding-32">
				<item-search placeholder="搜索发行或剧本" @change="setDown" v-model="name"></item-search>
			</view>
			<view class="u-flex sticky-tabs  u-padding-left-32 u-padding-right-32" :style="{top:top}">
				<view class="u-flex-1">
					<me-tabs v-model="indexCurrent"  :height="88" :tabs="tabs" @change="tabGetChange" :activeColor="currentThemeObj.primary" @tabTop="getTabTop"></me-tabs>
				</view>
			</view>
			<view class="day-list" v-if="isFilterFlag">
				<u-row>
					<u-col :span="4" v-for="(item,index) in dayList" :key="index">
						<view class="u-text-center day-item" @click="setDayIndex(index)" :class="{'day-item-active':dayIndex==index}">{{item.label}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="content">
			<view class="u-padding-25 time-list"  v-if="isFilterFlag">
				<u-row  gutter="20" >
					<u-col :span="3" v-for="(item,index) in timeList" :key="index">
						<view class="u-text-center time-item" @click="setTimeIndex(index)" :class="{'time-item-active':timeIndex==index}">{{item.label}}</view>
					</u-col>
					<u-col :span="3">
						<view class="u-position-relative">
							<view class="text-color-765CFE u-text-center full-select-box" @click="toggleFull">
								<text class="u-margin-right-20 u-font-24">{{isFullObj.label}}</text>
								<u-icon name="arrow-down-fill" size="20"></u-icon>
							</view>
							<view class="u-position-absolute full-list u-text-center" v-if="isFullFlag">
								<view v-for="(item,index) in isFullList" @click="setFullItem(item)" :key="index" class="full-item" :class="{'full-item-active':item.value===isFullValue}">
									{{item.label}}
								</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
				<swiper-item  v-for="(a,b) in tabs" :key="b">
					<mescroll-item :tabIndex="b" :tab="a" :inputName="name"  v-if="isShow" :categoryIds="categoryIds" ref="mescroll"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<u-mask :show="isFullFlag" z-index="54" :duration="400" @click="setMask" :zoom="false" :custom-style="{background: 'rgba(0, 0, 0, 0)'}"></u-mask>
	</view>
</template>

<script>
	import swiperList from '@/mixins/swiperList.js'
	import MescrollItem from "./swiperItem.vue";
	import pageMixins from '@/pages/pageMixins.js'
	import carManager from '@/mixins/carManager.js'
	import dayjs from 'dayjs'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	export default {
		mixins:[swiperList,pageMixins,carManager],
		data() {
			return {
				itemStyle:{
					color:'#B0B2D8'
				},
				tabs:[],
				otherHeight:'318rpx',
				name:'',
				categoryIds:[],
				timer:null,
				dayList:[{
					label:'今天',
					value:''
				},{
					label:'明天',
					value:''
				},{
					label:'后天',
					value:''
				}],
				timeList:[{
					label:'白天车',
					value:'05:00:00-17:00:00'
				},{
					label:'晚车',
					value:'17:00:00-23:00:00'
				},{
					label:'修仙车',
					value:'23:00:00-05:00:00'
				}],
				dayIndex:null,
				timeIndex:null,
				isFullList:[{
					label:'全部',
					value:null
				},{
					label:"未满员",
					value:false
				},{
					label:'已满员',
					value:true
				}],
				isFullValue:null,
				isFullFlag:false,
				isShow:false
			}
		},
		computed: {
			isFullObj() {
				return this.isFullList.find(val=>val.value===this.isFullValue); 
			},
			isFilterFlag(){
				return this.tabIndex===0 && this.indexCurrent===0
			}
		},
		components: {
			MescrollItem,itemSearch
		},
		onLoad() {
			//显示页面全部重置
			this.tabs = [
				{name:'未测', list: null, num:0, y:0,curPageLen:0, type:0, hasNext:true,showEnrollTime:1,userType:this.isAuth}
			]
			if(this.$store.getters.loginForm.uid){
				this.tabs.push({name:'已测', list: null, num:0, y:0, curPageLen:0,type:2, hasNext:true,showEnrollTime:1,userType:this.isAuth})
			};
			const nowTime = this.$store.getters.loginForm.systemTime;
			this.dayList = this.dayList.map((val,index)=>{ //今天明天后天
				val.value = dayjs(nowTime).add(index, 'day').format('YYYY-MM-DD')
				return val
			})
			this.isShow = true;
		},
		onHide() {
			this.isShow = false;
		},
		onShow() {
			this.isShow = true;
		},
		methods: {
			setCallback(){
				
			},
			getconfirm(){
				if(this.timer){
					clearTimeout(this.timer);
					this.timer = null;
				}
				this.timer = setTimeout(this.setDown,300)
			},
			setDown(){
				const ref = this.$refs.mescroll[this.tabIndex];
				ref.form.name = this.name;
				ref.downCallback()
			},
			//选中与取消选择时间
			setDayIndex(index){
				this.setTimeDay(index,'dayIndex')
			},
			//选中与取消选择时间
			setTimeIndex(index){
				this.setTimeDay(index,'timeIndex')
			},
			//设置时间和时段的区别
			setTimeDay(index,prototype){
				if(index===this[prototype]){
					this[prototype] = null;
					this.getSelectTime()
					return false;
				}
				this[prototype] = index;
				this.getSelectTime()
			},
			//拼接选中的时间
			getSelectTime(){
				const day = this.getTimeObj(this.dayList,this.dayIndex);
				let time = this.getTimeObj(this.timeList,this.timeIndex);
				time = time.value ? time.value.split('-'):['00:00:00',"23:59:59"];
				//if(day.value) time = time.map(val=>day.value+' '+val)
				const ref = this.unTestRef()
				ref.form.queryTimeInterval = time; //时段
				ref.form.queryTime = day.value //时间
				ref.downCallback()
			},
			unTestRef(){
				return this.$refs.mescroll[0];;
			},
			getTimeObj(list,index){
				return index!=null?list[index]:{};
			},
			//显示隐藏是否满员下拉
			toggleFull(){
				this.isFullFlag = !this.isFullFlag
			},
			//设置选中
			setFullItem(item){
				this.isFullValue = item.value;
				const ref = this.unTestRef()
				ref.form.isFullPeople = this.isFullValue; //时段
				ref.downCallback()
				this.toggleFull()
			},
			//设置mask
			setMask(){
				this.isFullFlag = false;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.tag-box{
		flex-wrap: wrap;
		.tag-item{
			width:33.33%;
			.tag-title{
				display: block;
				margin:10rpx;
				text-align: center;
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 0 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 50rpx;
				border-radius: 10rpx;
				color: var(--theme-color);
				border: 1px solid var(--theme-color);
				&/deep/.checked-tag-title{
					background-color: var(--theme-color);
					color: white;
				}
			}
		}
	}
	.tag-btn-view{
		height: 120rpx;
	}
	.tag-btns{
		justify-content: flex-end;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 32rpx;
		background-color: var(--submit-bar-background-color);
		.tag-btn{
			width: 140rpx;
			line-height: 60rpx;
			color: white;
			text-align: center;
			font-size: 22rpx;
			&.right-btn{
				background: #5643B9;
				border-color: #5643B9;
				border-radius: 0 var(--goods-action-button-border-radius,20px) var(--goods-action-button-border-radius,20px) 0;
			}
			&.left-btn{    
				background: #765CFE;
				border-color: #765CFE;
				border-radius: var(--goods-action-button-border-radius,20px) 0 0 var(--goods-action-button-border-radius,20px);
			}
		}
	}
	.sticky-tabs{
		z-index: 990;
		position: sticky;
	}
	.day-list{
		line-height:74rpx;
		background-color: white;
		.day-item{
			color: var(--title-color);
			font-size: 30rpx;
			&-active{
				color: var(--theme-color);
			}
		}
	}
	.time-list{
		.time-item{
			height: 64rpx;
			font-size: 34rpx;
			// background-color:#2F2D3A ;
			color: var(--title-color);
			text-align: center;
			line-height: 64rpx;
			border-radius: 50rpx;
			&-active{
				color: var(--theme-color);
			}
		}
	}
	.full-list{
		left: 0;
		right: 0;
		z-index: 55;
		top: 60rpx;
		background-color: white;
		border-radius: 16rpx;
	}
	.full-item{
		color: var(--title-color);
		line-height: 50rpx;
		font-size: 24rpx;
		&-active{				
			color: var(--theme-color);
		}
	}
	.full-select-box{
		line-height: 64rpx;
	}
</style>